<template>
  <div>
    <h1>我是Demo组件</h1>
    <p ref='pp'>{{msg}}</p>
    <button @click="msg='hello'">点我修改</button>
  </div>
</template>

<script>
export default {
  name: 'Demo',

  data() {
    return {
      msg:'你好世界'
    };
  },
  beforeCreate(){
    console.log('beforeCreate',this.msg)
  },
   created(){
     console.log('created',this.msg)
   },
   beforeMount(){
    console.log('beforeMount',this.$refs.pp)
   },
   mounted(){
    console.log('mounted',this.$refs.pp)
   },
   beforeUpdate(){
    console.log('beforeUpdate',this.$refs.pp.innerHTML)
   },
   updated(){
    console.log('updated',this.$refs.pp.innerHTML)
   },
  beforeDestroy(){
    console.log('beforeDestory')
  },
  destroyed(){
    console.log('destoryed')
  },

  methods: {
    
  },
};
</script>

<style lang="scss" scoped>

</style>